<template>
  <el-dialog v-el-drag-dialog title="库存管理" width="1200px" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose" destroy-on-close>
    <!-- 搜索区域 -->
    <el-card style="margin:0 0 5px 5px" v-show="showSearch">
      <el-form ref="queryForm" :inline="true" :model="queryData">
        <el-form-item label="选择仓库" prop="Q_wareId_L_EQ">
          <el-select placeholder="请选择" v-model="queryData.Q_wareId_L_EQ" filterable clearable>
            <el-option
              v-for="item in wareData"
              :key="'ware_' + item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="fr p-r-10">
          <el-button class="filter-item m-l-10" type="primary" round icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- table区域 -->
    <el-card class="m-l-5">
      <el-row :gutter="10" class="m-b-5">
        <el-col :span="1.5">
          <el-button v-permission="['mall:product:edit']" size="mini" plain type="primary" icon="el-icon-plus" @click="handleWareSku()">
            新增
          </el-button>
        </el-col>
        <table-toolbar :showSearch.sync="showSearch" @refresh="getTableData" />
      </el-row>
      <el-table
        ref="ware_sku_table"
        v-loading="tableLoading"
        :data="tableData"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
        show-overflow-tooltip
        height="350px"
      >
        <el-table-column align="center" label="仓库名称" prop="wareName" width="180" show-overflow-tooltip />
        <el-table-column align="center" label="商品名称" prop="skuName" show-overflow-tooltip />
        <el-table-column align="center" label="库存数" prop="stock" width="100" show-overflow-tooltip />
        <el-table-column align="center" label="锁定库存" prop="stockLocked" width="100" />
        <el-table-column align="center" label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-link v-permission="['mall:product:edit']" class="m-r-5" type="primary" icon="el-icon-view" @click="handleWareSku(scope.row)">编辑</el-link>
            <el-link v-permission="['mall:product:edit']" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="tableQuery.total>0" :total="tableQuery.total" :page.sync="tableQuery.page" :limit.sync="tableQuery.limit" @pagination="getTableData(false)" />
    </el-card>

    <ware-sku-form-dialog v-if="openFormDialog" ref="ware_sku_form" @confirmForm="handleFilter" />
  </el-dialog>
</template>

<script>
import { wareList, wareSkuTable, wareSkuDelete } from '@/api/mall/ware/ware'
import WareSkuFormDialog from './edit'

export default {
  name: 'WareSkuDialog',
  components: {
    WareSkuFormDialog
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      showSearch: true,
      queryData: {
        Q_skuId_L_EQ: undefined,
        Q_wareId_L_EQ: undefined
      },
      tableLoading: false,
      tableData: [],
      tableQuery: {
        page: 1,
        limit: 20,
        total: 0,
        sort: undefined,
        order: undefined
      },
      wareData: [],
      openFormDialog: false
    }
  },
  methods: {
    init(skuId) {
      this.queryData.Q_skuId_L_EQ = skuId
      this.$nextTick(() => {
        this.getWareData()
        this.getTableData()
        this.visible = true
      })
    },
    getWareData() {
      wareList().then(response => {
        this.wareData = response
      }).catch(() => {})
    },
    handleFilter() {
      this.tableQuery.page = 1
      this.getTableData(false)
    },
    getTableData() {
      const query = Object.assign(this.tableQuery, this.queryData)
      this.tableLoading = true
      wareSkuTable(query).then(response => {
        this.tableData = response.param.data
        this.tableQuery.total = response.param.recordsTotal
        this.tableLoading = false
        this.$refs.ware_sku_table.bodyWrapper.scrollTop = 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleWareSku(row) {
      row = row || { skuId: this.queryData.Q_skuId_L_EQ }
      this.openFormDialog = true
      this.$nextTick(() => {
        this.$refs.ware_sku_form.init(row)
      })
    },
    handleDelete(id) {
      this.$confirm('是否删除所选仓库库存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        wareSkuDelete(id).then(response => {
          this.handleFilter()
          this.$modal.msgSuccess(response.msg)
        })
      })
    },
    onClose() {
      this.$refs.queryForm.resetFields()
      this.visible = false
    }
  }
}
</script>
